<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面 - 智能教育系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .payment-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .payment-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .payment-method {
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .payment-method:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        
        .payment-method.selected {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .loading {
            display: none;
        }
        
        .loading.active {
            display: block;
        }
    </style>
</head>
<body class="py-8">
    <div class="container mx-auto px-4 max-w-2xl">
        <div class="payment-card p-8">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">确认支付</h1>
                <p class="text-gray-600">请选择支付方式完成订单</p>
            </div>
            
            <!-- 订单信息 -->
            <div class="bg-gray-50 rounded-lg p-6 mb-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">订单信息</h2>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-600">订单号：</span>
                        <span th:text="${businessOrderNo}" class="font-medium"></span>
                    </div>
                    <div>
                        <span class="text-gray-600">业务类型：</span>
                        <span th:text="${businessType}" class="font-medium"></span>
                    </div>
                    <div>
                        <span class="text-gray-600">支付金额：</span>
                        <span class="font-medium text-red-600 text-lg" th:text="'¥' + ${amount}"></span>
                    </div>
                    <div>
                        <span class="text-gray-600">用户：</span>
                        <span th:text="${userName}" class="font-medium"></span>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-gray-600">订单描述：</span>
                    <span th:text="${description}" class="font-medium"></span>
                </div>
            </div>
            
            <!-- 支付方式选择 -->
            <div class="mb-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">选择支付方式</h2>
                <div class="space-y-3">
                    <div class="payment-method" data-method="ALIPAY_WEB">
                        <div class="flex items-center">
                            <input type="radio" name="paymentMethod" value="ALIPAY_WEB" class="mr-3" checked>
                            <div class="flex items-center">
                                <img src="https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png" 
                                     alt="支付宝" class="h-6 mr-3">
                                <span class="font-medium">支付宝</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="payment-method" data-method="WECHAT_H5">
                        <div class="flex items-center">
                            <input type="radio" name="paymentMethod" value="WECHAT_H5" class="mr-3">
                            <div class="flex items-center">
                                <img src="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png" 
                                     alt="微信支付" class="h-6 mr-3">
                                <span class="font-medium">微信支付</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 支付按钮 -->
            <div class="text-center">
                <button id="payButton" class="btn-primary text-lg px-8 py-3">
                    立即支付
                </button>
                <div id="loading" class="loading mt-4">
                    <div class="inline-flex items-center">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        正在创建支付订单...
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script th:inline="javascript">
        // 获取页面数据
        const businessOrderNo = [[${businessOrderNo}]];
        const businessType = [[${businessType}]];
        const amount = [[${amount}]];
        const description = [[${description}]];
        const userId = [[${userId}]];
        const userName = [[${userName}]];
        
        // 支付方式选择
        document.querySelectorAll('.payment-method').forEach(method => {
            method.addEventListener('click', function() {
                // 移除其他选中状态
                document.querySelectorAll('.payment-method').forEach(m => m.classList.remove('selected'));
                // 添加当前选中状态
                this.classList.add('selected');
                // 选中对应的radio
                const radio = this.querySelector('input[type="radio"]');
                radio.checked = true;
            });
        });
        
        // 支付按钮点击事件
        document.getElementById('payButton').addEventListener('click', async function() {
            const selectedMethod = document.querySelector('input[name="paymentMethod"]:checked').value;
            
            // 显示加载状态
            this.disabled = true;
            this.textContent = '处理中...';
            document.getElementById('loading').classList.add('active');
            
            try {
                // 构建支付请求
                const paymentRequest = {
                    businessOrderNo: businessOrderNo,
                    businessType: businessType,
                    amount: parseFloat(amount),
                    description: description,
                    paymentType: selectedMethod.includes('ALIPAY') ? 'ALIPAY' : 'WECHAT',
                    channel: selectedMethod,
                    userId: userId,
                    userName: userName,
                    returnUrl: window.location.origin + '/payment/success',
                    notifyUrl: window.location.origin + '/payment/callback/' + selectedMethod.toLowerCase()
                };
                
                // 发送支付请求
                const response = await fetch('/payment/create', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(paymentRequest)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    if (result.paymentUrl) {
                        // 跳转到支付页面
                        window.location.href = result.paymentUrl;
                    } else if (result.qrCode) {
                        // 显示二维码
                        showQRCode(result.qrCode, result.orderNo);
                    } else {
                        // 支付成功
                        window.location.href = '/payment/success?orderNo=' + result.orderNo;
                    }
                } else {
                    alert('创建支付订单失败：' + result.errorMessage);
                    resetButton();
                }
                
            } catch (error) {
                console.error('支付请求失败:', error);
                alert('支付请求失败，请重试');
                resetButton();
            }
        });
        
        // 重置按钮状态
        function resetButton() {
            const button = document.getElementById('payButton');
            button.disabled = false;
            button.textContent = '立即支付';
            document.getElementById('loading').classList.remove('active');
        }
        
        // 显示二维码
        function showQRCode(qrCode, orderNo) {
            // 创建二维码弹窗
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
            modal.innerHTML = `
                <div class="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
                    <h3 class="text-lg font-semibold mb-4">请扫码支付</h3>
                    <div class="text-center mb-4">
                        <img src="${qrCode}" alt="支付二维码" class="mx-auto">
                    </div>
                    <p class="text-sm text-gray-600 mb-4">请使用微信或支付宝扫描二维码完成支付</p>
                    <div class="flex justify-between">
                        <button onclick="closeQRModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
                        <button onclick="checkPaymentStatus('${orderNo}')" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">检查支付状态</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        }
        
        // 关闭二维码弹窗
        function closeQRModal() {
            const modal = document.querySelector('.fixed.inset-0');
            if (modal) {
                modal.remove();
            }
        }
        
        // 检查支付状态
        async function checkPaymentStatus(orderNo) {
            try {
                const response = await fetch(`/payment/status/${orderNo}`);
                const result = await response.json();
                
                if (result.success && result.status === 'SUCCESS') {
                    closeQRModal();
                    window.location.href = '/payment/success?orderNo=' + orderNo;
                } else {
                    alert('支付尚未完成，请继续支付');
                }
            } catch (error) {
                console.error('查询支付状态失败:', error);
                alert('查询支付状态失败，请重试');
            }
        }
    </script>
</body>
</html> 